<template>
    <div>
        <Modal :closable="false" :mask-closable="false" v-model="isApproval" :title="ApprovalTitle">
            <div v-if="isApproval">
                <Form ref="formItem" :model="formItem" :rules="ruleValidate" :label-width="100">
                    <Row>
                        <i-col :lg="{ span: 15}">
                            <FormItem label="标题">
                                <i-input :disabled="true" v-model="label"></i-input>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="图片">
                                <img-upload
                                    v-if="isImg"
                                    @delImgList="delImgList"
                                    :defaultList="imgDefaultList"
                                    :multiple="false"
                                    :data="{directory:'OrgPath'}"
                                    :value="'pic'"
                                    :check="1"
                                    @setImgLIst="setImgLIst"
                                ></img-upload>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 20}">
                            <FormItem label="文件">
                                <file-upload @setFile="setFile" :check="check" :data="directory"></file-upload>
                                <a v-if="isFile" :href="formItem.filepath">{{formItem.filepath}}</a>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <FormItem label="审批流程">
                            <ul class="approver-user">
                                <li v-for="(item,index) in approverList" :key="index">
                                    <div v-if="item.url" class="user-img">
                                        <img :src="item.url" alt>
                                        <p>{{item.name}}</p>
                                    </div>
                                    <div v-else class="default-user-img">
                                        <span class="default-user-title">{{item.name}}</span>
                                        <p>{{item.name}}</p>
                                    </div>
                                </li>
                            </ul>
                        </FormItem>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 24}">
                            <FormItem label="申请理由">
                                <i-input type="textarea" v-model="formItem.reason"></i-input>
                            </FormItem>
                        </i-col>
                    </Row>
                </Form>
            </div>
            <div slot="footer">
                <Button size="large" @click="handleClose">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit('formItem')">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import ImgUpload from '@/components/ImgUpload';
import FileUpload from '@/components/FileUpload';
import { getComFlowProcess, setComFlow } from './service';
export default {
    name: 'Approval',
    components: {
        ImgUpload,
        FileUpload
    },
    props: {
        isApproval: {
            type: Boolean,
            default: false
        },
        ApprovalTitle: {
            type: String,
            default: ''
        },
        label: {
            type: String,
            default: ''
        },
        id: {
            type: Number
        },
        directory: {
            type: Object
        },
        check: {
            type: Number
        },
        info: {
            type: Object
        },
        groupid: {
            type: Number
        }
    },
    data() {
        return {
            imglist: {
                pic: []
            },
            approverList: [],
            imgDefaultList: [],
            fileDefaultList: [],
            isFile: false,
            isImg: true,
            formItem: {
                filepath: []
            },
            ruleValidate: {}
        };
    },
    methods: {
        /* 图片删除 */
        delImgList(list, value) {
            this.imglist[value] = list;
            this.imgType = false;
        },
        /* 图片上传 */
        setImgLIst(list, value) {
            this.imglist[value] = list;
            this.imgType = true;
        },
        /* 关闭对话框 */
        handleClose() {
            this.$emit('setApproval');
        },
        setFile(e) {
            this.formItem.filepath = e;
        },
        handleSubmit() {
            this.formItem = {
                ...this.formItem,
                picpath: this.imglist.pic.length > 0 ? this.imglist.pic[0].url : '',
                filepath: this.formItem.filepath.length > 0 ? this.formItem.filepath : '',
                cfgid: this.groupid,
                bid: this.id,
                cfid: this.formItem.cfid
            };
            setComFlow(this.formItem).then(res => {
                if (res.state == 'success') {
                    this.$Message.success(res.message);
                    this.$emit('setApproval');
                } else {
                    this.$Message.error(res.message);
                }
            });
        }
    },
    async mounted() {
        if (this.ApprovalTitle == '修改审批') {
            this.isImg = false;
            const { ComFlow } = this.info;
            this.formItem.reason = ComFlow.Reason;
            if (ComFlow.UploadPic.length > 0) {
                await this.imgDefaultList.push({
                    url: ComFlow.UploadPic.split(',')[0]
                });
                await this.imglist.pic.push({
                    url: ComFlow.UploadPic.split(',')[0]
                });
            }
            if (ComFlow.UploadFile.length > 0) {
                this.formItem.filepath = ComFlow.UploadFile.split(',')[0];
                this.isFile = true;
            }
            this.isImg = true;
            this.formItem.cfid = this.info.ComFlow.ID;
        } else {
            this.isImg = true;
            this.formItem.cfid = '';
        }
        this.approverList = [];
        getComFlowProcess({
            groupid: this.groupid
        }).then(res => {
            const userName = res.data.ApprovedUserName.split(',');
            for (let item in userName) {
                this.approverList.push({
                    name: userName[item],
                    url: res.data.picture.split(',')[item]
                });
            }
        });
    }
};
</script>

<style lang="less" scoped>
.approver-user {
    display: flex;
    li {
        margin: 0 15px;
        position: relative;
        img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
        }
        .user-img {
            text-align: center;
        }
        .default-user-img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: #1890ff;
            text-align: center;
        }
        .default-user-title {
            color: #fff;
            width: 60px;
            display: block;
            line-height: 60px;
            margin-bottom: 12px;
        }
    }
    li::after {
        content: '';
        width: 40px;
        height: 10px;
        border-bottom: 1px solid #ccc;
        position: absolute;
        top: 20px;
        right: -40px;
    }
    li:last-child::after {
        content: '';
        position: absolute;
        border: none;
    }
}
</style>

